import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import './LanguageSelector.css';

const LanguageSelector = ({ className = '', fixed = false }) => {
  const { i18n, t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);

  const languages = [
    { code: 'zh', name: 'chinese', flag: '🇨🇳', label: '中文' },
    { code: 'en', name: 'english', flag: '🇺🇸', label: 'English' },
    { code: 'ja', name: 'japanese', flag: '🇯🇵', label: '日本語' },
    { code: 'ko', name: 'korean', flag: '🇰🇷', label: '한국어' }
  ];

  const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];

  const handleLanguageChange = (langCode) => {
    i18n.changeLanguage(langCode);
    localStorage.setItem('language', langCode);
    setIsOpen(false);
  };

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  // 点击外部区域关闭下拉菜单
  React.useEffect(() => {
    const handleClickOutside = (event) => {
      if (!event.target.closest('.language-selector')) {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener('click', handleClickOutside);
    }

    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, [isOpen]);

  // 定义高优先级的行内样式
  const triggerStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    padding: '8px 12px',
    background: isOpen 
      ? 'linear-gradient(135deg, rgba(230, 247, 255, 1) 0%, rgba(184, 233, 255, 1) 100%)'
      : 'linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.98) 100%)',
    borderWidth: '3px',
    borderStyle: 'solid',
    borderColor: 'rgba(24, 144, 255, 0.7)',
    borderRadius: '8px',
    cursor: 'pointer',
    transition: 'all 0.3s ease',
    fontSize: '14px',
    minWidth: '100px',
    backdropFilter: 'blur(15px)',
    boxShadow: isOpen 
      ? '0 12px 32px rgba(24, 144, 255, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.95)'
      : '0 8px 24px rgba(24, 144, 255, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.9)',
    zIndex: 1000
  };

  const [isHovered, setIsHovered] = useState(false);

  const hoverStyle = isHovered ? {
    background: 'linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(230, 247, 255, 1) 100%)',
    borderColor: 'rgba(24, 144, 255, 0.9)',
    boxShadow: '0 12px 32px rgba(24, 144, 255, 0.4), inset 0 3px 0 rgba(255, 255, 255, 0.95)',
    transform: 'translateY(-3px)'
  } : {};

  // 容器样式 - 支持固定定位
  const containerStyle = fixed ? {
    position: 'fixed',
    top: '20px',
    right: '20px',
    zIndex: 1000
  } : {};

  return (
    <div 
      className={`language-selector ${className}`}
      style={containerStyle}
    >
      <div 
        className={`language-selector-trigger ${isOpen ? 'active' : ''}`}
        style={{...triggerStyle, ...hoverStyle}}
        onClick={toggleDropdown}
        title={t('language.select')}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <span 
          className="language-flag"
          style={{fontSize: '18px', lineHeight: 1}}
        >
          {currentLanguage.flag}
        </span>
        <span 
          className="language-name"
          style={{
            fontWeight: '600',
            color: '#1a1a1a',
            whiteSpace: 'nowrap',
            textShadow: '0 1px 2px rgba(255, 255, 255, 0.8)'
          }}
        >
          {currentLanguage.label}
        </span>
        <span 
          className={`language-arrow ${isOpen ? 'rotated' : ''}`}
          style={{
            fontSize: '12px',
            color: '#1890ff',
            fontWeight: 'bold',
            transition: 'transform 0.3s ease',
            marginLeft: 'auto',
            textShadow: '0 1px 2px rgba(255, 255, 255, 0.8)',
            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
          }}
        >
          ▼
        </span>
      </div>
      
      {isOpen && (
        <div 
          className="language-selector-dropdown"
          style={{
            position: 'absolute',
            top: 'calc(100% + 4px)',
            right: '0',
            background: 'white',
            borderWidth: '2px',
            borderStyle: 'solid',
            borderColor: 'rgba(24, 144, 255, 0.3)',
            borderRadius: '8px',
            boxShadow: '0 8px 24px rgba(24, 144, 255, 0.25)',
            overflow: 'hidden',
            minWidth: '150px',
            animation: 'dropdownFadeIn 0.2s ease',
            backdropFilter: 'blur(10px)',
            zIndex: 1001
          }}
        >
          {languages.map((language) => (
            <div
              key={language.code}
              className={`language-option ${language.code === i18n.language ? 'active' : ''}`}
              onClick={() => handleLanguageChange(language.code)}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                padding: '12px 16px',
                cursor: 'pointer',
                transition: 'background-color 0.2s ease',
                fontSize: '14px',
                borderBottomWidth: '1px',
                borderBottomStyle: 'solid',
                borderBottomColor: 'rgba(24, 144, 255, 0.1)',
                backgroundColor: language.code === i18n.language 
                  ? 'rgba(24, 144, 255, 0.1)' 
                  : 'transparent',
                color: language.code === i18n.language 
                  ? '#1890ff' 
                  : '#333'
              }}
              onMouseEnter={(e) => {
                if (language.code !== i18n.language) {
                  e.target.style.backgroundColor = 'rgba(24, 144, 255, 0.05)';
                }
              }}
              onMouseLeave={(e) => {
                if (language.code !== i18n.language) {
                  e.target.style.backgroundColor = 'transparent';
                }
              }}
            >
              <span 
                className="language-flag"
                style={{fontSize: '16px'}}
              >
                {language.flag}
              </span>
              <span 
                className="language-label"
                style={{
                  flex: 1,
                  fontWeight: '500'
                }}
              >
                {language.label}
              </span>
              {language.code === i18n.language && (
                <span 
                  className="language-check"
                  style={{
                    color: '#1890ff',
                    fontWeight: 'bold',
                    fontSize: '16px'
                  }}
                >
                  ✓
                </span>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default LanguageSelector; 